<template>
	<div class="body-wraper">
		<div class="content-wraper">
			<div class="leftad-wraper">
				<img src="../../../static/plogin_ad.png"/>
        <div style="position: absolute;right: 455px; bottom:10px; color: #A3A3A3;"></div>
			</div>
			<div class="login-wraper">
				<div class="loginbox">
					<div class="logintitle">
						系统登录
					</div>
					<div style="align-items: center; width: 100%; ">
						<el-form ref="loginForm" :rules="rules" :model="loginForm" style="margin-top: 50px;"
							v-on:submit.native.prevent>
							<el-form-item prop="username">
								<el-input placeholder="请输入账号/手机号" v-model="loginForm.username"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input placeholder="请输入密码" type="password" v-model="loginForm.password"
									show-password></el-input>
							</el-form-item>
							<el-form-item>
								<el-button style="width: 100%;" type="primary" native-type="submit"
									@click.prevent="handleSubmit">登录</el-button>
							</el-form-item>
							<el-form-item style="display: flex; flex-direction: column;">
								<div>
									<el-checkbox style="float:left;" v-model="loginForm.remember">记住账号</el-checkbox>
								</div>
								<div style="float: right;">
									<el-button v-if="false" style="right:0px" type="text">忘记密码</el-button>
								</div>
							</el-form-item>
						</el-form>
						<el-divider>其它登录方式</el-divider>
            <div style="text-align: center; margin-top: 10px;">
              微信
            </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					username: [{
						required: true,
						message: '请输入账号或手机号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}]
				},
				loginForm: {
					username: 'abc',
					password: '123',
					remember:false
				}
			}
		},
		mounted() {
			if(localStorage.getItem("remember")!=null){
				this.loginForm.remember=localStorage.getItem("remember")=="true"? true:false;
				this.loginForm.username=localStorage.getItem("remuser");
			}
		},
		methods: {

			handleSubmit: function() {
				let _this = this;
				this.$refs['loginForm'].validate(valid => {
					if (valid) {
						let params = {
							username: this.loginForm.username,
							password: this.loginForm.password,
						};
            localStorage.setItem("userinfo",JSON.stringify({nickname:'管理员',id:234}))


            _this.$router.push("/admin/index")

					}
				});
			}
		}
	}
</script>

<style>
	.body-wraper {
		background: url('../../../static/login-bg.png');
		height: 100%;
		background-size: cover;
		display: flex;
		flex-direction: row;
	}

	.content-wraper {
		width: 940px;
		height: 500px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		box-shadow: 0 3px 38px 2px rgb(4 32 102 / 8%);
		border-radius: 8px;
		overflow: hidden;
		display: flex;
    border: 2px solid #eaeaea;
	}

	.login-wraper {
		width: 460px;
		background: #fff;
		position: relative;
	}

	.loginbox {
		padding: 40px 50px;
		display: flex;
		flex-direction: column
	}

	.logintitle {
		font-size: 26px;
		color: #333;
		font-weight: 700;
		text-align: center;
	}
</style>
